<template>
  <div style="display: flex; margin-top: 15px">
    <div style="flex: 1; display: flex; align-items: center">
      <el-icon @click="collapse" v-if="isCollapse"><Expand /></el-icon>

      <el-icon @click="collapse" v-else><Fold /></el-icon>

      <el-breadcrumb separator="/" style="margin-left: 10px;">
        <div class="breadcrumb-content">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item
              class="breadcrumb-item"
              v-for="item in breadCrumbList"
              :key="item.path"
            >
              <span v-if="item.redirect === route.path">
                {{ item.meta.title }}
              </span>
              <a v-else @click="handleLine(item)">{{ item.meta.title }}</a>
            </el-breadcrumb-item>
          </transition-group>
        </div>
      </el-breadcrumb>
    </div>
    <el-dropdown style="margin-left: auto">
      <span class="el-dropdown-link" style="display: flex; align-items: center">
        <el-avatar
          shape="square"
          :size="30"
          style="border-radius: 50%; margin-right: 8px"
          src="https://foruda.gitee.com/avatar/1696342942137152712/5352827_adnaan_1696342942.png!avatar200"
        ></el-avatar>

        <span>adnaan</span>

        <el-icon style="margin-left: 5px">
          <ArrowDownBold />
        </el-icon>
      </span>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import { reactive, watch, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
  props: {
    isCollapse: Boolean
  },
  setup() {
    let router = useRouter()

    let arr = reactive({
      breadCrumbList: []
    })
    const route = useRoute()
    // 获取面包屑数据
    const getBreadcrumbList = () => {
      arr.breadCrumbList = []
      route.matched.forEach((item) => {
        if (item.meta.title) arr.breadCrumbList.push(item)
      })
      if (
        !arr.breadCrumbList.length ||
        arr.breadCrumbList[0].name !== 'Dashboard'
      )
        arr.breadCrumbList.unshift({
          path: '/admin/',
          meta: { title: '首页' }
        })
    }
    getBreadcrumbList()
    // 监听路由变化
    watch(route, () => {
      getBreadcrumbList()
    })
    // 面包屑跳转
    const handleLine = ({ redirect, path }) => {
      redirect ? router.push(redirect) : router.push(path)
    }
    return {
      ...toRefs(arr),
      router,
      route,
      handleLine
    }
  },
  methods: {
    collapse() {
      this.$emit('asideCollapse')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-link:focus {
  outline: 0;
}
</style>
